import React, {useState, useEffect, useRef} from 'react'
import * as echarts from 'echarts';
import '../styles/chart.less'

const Chart = (props) => {
  const chartRef = useRef(null)

  const { data = [] } = props

  useEffect(() => {
    if (data.length !== 0) {
      initChart(data.map(item => item.balanceSum))
    }
  }, [data])

  const initChart = (data) => {
    const myChart = echarts.init(chartRef.current);
    // 绘制图表
    const lineChartOption = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '8%',
        right: '2%',
        top: '8%',
        bottom: '8%',
      },
      xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          type: 'bar',
          data,
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1, // 渐变方向 (x0, y0, x1, y1) - 0,0是起点，0,1是终点（垂直向下）
              [
                { offset: 0, color: '#A0D8B3' }, // 顶部颜色
                { offset: 1, color: '#80BDA2' }  // 底部颜色
              ]
            )
          }
        }
      ]
    };

    myChart.setOption(lineChartOption)

    // const rawData = [
    //   [5, 20, 36, 10, 10, 20, 44, 20, 36, 10, 10, 20],
    //   [20, 44, 20, 36, 10, 10, 20, 5, 20, 36, 10, 10],
    //   [10, 10, 20, 44, 5, 20, 36, 20, 36, 10, 10, 20]
    // ];
    // const totalData = [];

    // for (let i = 0; i < rawData[0].length; ++i) {
    //   let sum = 0;
    //   for (let j = 0; j < rawData.length; ++j) {
    //     sum += rawData[j][i];
    //   }
    //   totalData.push(sum);
    // }

    // const barChartOption = {
    //   legend: {
    //     selectedMode: false
    //   },
    //   grid: {
    //     left: 40,
    //     right: 20,
    //     top: 50,
    //     bottom: 50
    //   },
    //   yAxis: {
    //     type: 'value'
    //   },
    //   xAxis: {
    //     type: 'category',
    //     data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    //   },
    //   series: [
    //     '净资产',
    //     '总资产',
    //     '总负债'
    //   ].map((name, sid) => {
    //     return {
    //       name,
    //       type: 'bar',
    //       stack: 'total',
    //       barWidth: '60%',
    //       label: {
    //         show: true,
    //         formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
    //       },
    //       data: rawData[sid].map((d, did) =>
    //         totalData[did] <= 0 ? 0 : d / totalData[did]
    //       )
    //     };
    //   })
    // }

    // myChart.setOption(barChartOption)
  }

  if (data.length === 0) return null

  return <div ref={chartRef} className="asset-chart-main"></div>
}

export default Chart;